<template>
  <div class="wrapper  h-100">
    <div class="ur-form my-2">
      <el-input placeholder="请输入内容"  class="input-with-select w250 "  size="small" v-model="searchTxt">
        <el-button slot="append"  class="ur-btn ur-btn-primary" @click="QueryLike"> <i class="iconfont icon-search"></i>查询</el-button>
      </el-input>
    </div>
    <div class="scrollY" :style="{height:clientHeight-144+'px'}">
      <ul class="groupList d-flex  flex-wrap">
        <li class="group-item" @click="addGroup" ><i class="iconfont icon-guanbi"></i></li>
        <!--添加分组-->
        <li class="group-item" v-if="groupDig">
          <div class="group-item-main">
            <img class="float-left mx-2" src="~assets/image/group/pole.png" width="108" height="108" />
            <div style="float:left">
              <h5 class="mt-3">分组名称：</h5>
              <div class=" my-2">
                <el-tooltip :content="errors.first('GroupName')" :value="errors.has('GroupName')" :manual="true">
                  <el-input placeholder="请输入内容" class="input-with-select w180 mr-2" size="small" v-model="groupName"
                            :class="{'is-error':errors.has('GroupName')}" v-validate="'required|max:23'" name="GroupName"></el-input>
                </el-tooltip>
              </div>
              <div class="mt-3">
                <el-button class="ur-btn ur-btn-primary w80" @click="save"><i class="iconfont icon-sure"></i>确定</el-button>
                <el-button class="ur-btn ur-btn-primary w80" @click.native="groupDig=false"><i class="iconfont icon-close3"></i>取消</el-button>
              </div>
            </div>
          </div>
        </li>
        <!--分组列表-->
        <li class="group-item" v-for="(item,index) in groupList" @click="selectPole(item,index)">
          <div class="group-item-main">
            <img class="float-left mx-2" src="~assets/image/group/pole.png" width="108" height="108" />
            <div class="d-flex flex-column justify-content-between" style="height:108px;">
              <h5 class="text">分组名称：</h5>
              <h3 class="text" v-if="!item.change" :title="item.GroupName">{{item.GroupName}}</h3>
              <div class="my-2" v-else>
                <el-tooltip :content="errors.first('GroupName')" :value="errors.has('GroupName')" :manual="true">
                  <el-input placeholder="请输入内容" class="input-with-select w180 mr-2" size="small" v-model="item.GroupName"
                            :class="{'is-error':errors.has('GroupName')}" v-validate="'required|max:23'" name="GroupName"></el-input>
                </el-tooltip>
              </div>
              <el-button v-if="!item.change" class="group_btn" @click="updateDevices(item)"><i class="iconfont icon-tianjia"></i>添加设备（{{item.DevCount}}）</el-button>
              <div class="mt-3" v-else>
                <el-button class="ur-btn ur-btn-primary w80" @click="updataGroup(item)"><i class="iconfont icon-sure"></i>确定</el-button>
                <el-button class="ur-btn ur-btn-primary w80" @click.native="item.change=false"><i class="iconfont icon-close3"></i>取消</el-button>
              </div>
              <div class="p_absolute" style="top:10px;right: 10px;" v-if="currGroup.Id==item.Id">
                <el-button class="ur-btn ur-btn-waring d-inline-block"  @click="edit(item)">
                  <i class="font18 iconfont icon-edit mr-0"></i>
                </el-button>
                <el-button class="ur-btn ur-btn-danger d-inline-block ml-2" @click="del(item)">
                  <i class="font18 iconfont icon-delete mr-0"></i>
                </el-button>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <el-dialog class="ur-form-dialog" v-el-drag-dialog title="设备分组" :visible.sync="GroupListDig" width="1000px" style="margin-top:11vh;" @close.once="closeDialog(false)">
      <grouplist v-if="GroupListDig" :groupId="groupId"></grouplist>
    </el-dialog>
  </div>
</template>

<script>
  import grouplist from './pole-group-list'
  import {mapState} from 'vuex'
  import api from 'api/api'
  import elDragDialog from 'directive/el-dragDialog'

  export default {
    directives:{elDragDialog},
    components: {
      grouplist
    },
    props: {},
    data() {
      return {
        searchTxt: "",
        groupDig: false,
        GroupListDig: false,
        groupName: "",
        groupList: [],
        currGroup: {},
        groupId: "",
      }
    },
    watch: {},
    computed: mapState({
      clientHeight: state => state.comm.clientHeight,
      clientWidth: state => state.comm.clientWidth,
      // limits:state=>state.user.userInfo.limits
    }),
    methods: {
      addGroup() {
        this.groupList.map(function (e) {
          e.change =false
        })
        this.groupDig = true
      },
      updateDevices(item) {
        this.GroupListDig = true
        this.groupId = item.Id
      },
      closeDialog(v) {
        this.GroupListDig = v
        this.QueryLike()
      },
      updataGroup(item) {
        var data = {GroupName: item.GroupName, Id: item.Id}
        this.$validator.validateAll().then((res) => {
          if (!res) return
          api.fetch('/Group/UpdateRtu', data).then(r => {
            if (r != '') {
              item.change = false
            }
          })
        })
      },
      save() {
        var data = { GroupName: this.groupName }
        this.$validator.validateAll().then((res) => {
          if (!res) return
          api.fetch('/Group/InsertRtu', data).then(r => {
            if (r != '') {
              this.groupDig = false
              this.QueryLike()
            }
          })
        })
      },
      selectPole(item, index) {
        this.groupDig = false
        this.groupList.map(function (e) {
          e.change = false
        })
        this.groupId = item.Id
        this.currGroup = item
      },
      QueryLike() {
        this.groupList = []
        // api.fetchSimple('/Group/QueryLikeRtu', { value: this.searchTxt }).then(r => {
        //   if (r != undefined) {
        //     r.map(function (e) {
        //       this.groupList.push({change: null,...e})
        //     })
        //     this.groupId = self.groupList[0].Id;
        //     this.currGroup = r[0]
        //   }
        // })
        for(let i=1;i<6;i++){
          let o={DevAddr: null, DevCount: 3, GroupName: "组"+i, GroupNo: i, Id: i, Type: 1,}
          this.groupList.push({change: false,...o})
        }
        this.currGroup=this.groupList[0]
      },
      edit(item){
        this.$nextTick(()=>{
          item.change=true
        })
      },
      del(item) {
        var ids = [];
        ids.push(item.Id);
        this.$confirm('确认删除选中记录吗？', '提示', {type: 'warning'})
            .then(() => {
              api.fetch('/Group/DeleteRtu', ids).then(r => {
                if (r != '') {
                  this.$message.success({showClose:true,message:'删除成功'});
                  this.QueryLike();
                }
              })
            })
      }
    },
    created() {
      this.QueryLike()
    },
    mounted() {
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">

</style>
